<template>
  <view calss="operation" v-loading="loading">
    <view class="container">
      <view class="head">
        <view class="flex-item" @click="actions(6)">
          <image v-if="datas.lineType == 2" src="@/static/powerOff.png"></image>
          <image v-else src="@/static/powerOn.png"></image>
        </view>
        <view class="flex-text lastUpdateTimeBox">{{
          datas.lastUpdateTime
        }}</view>
        <BatteryBox style="margin-top: 22rpx" :number="datas.currentBat" />
        <RedLiht :value="datas.currentRedLiht" />
      </view>
      <div class="contentBox">
        <view class="content">
          <image src="@/static/appearancea.png"></image>
          <view class="content-box">
            <view v-if="datas.lineType == 2" class="num">
              <view class="num-a" v-if="datas.currentPowerDbm != -70">
                <uv-count-to
                  fontSize="45"
                  color="#ffd700"
                  :startVal="0"
                  :decimals="2"
                  :endVal="datas.currentPowerDbm" />dBm
              </view>
              <view class="num-a" v-else> Lo </view>
              <view class="num-b">{{ datas.currentPowermW }}</view>
              <view class="num-c">
                <uv-count-to
                  :startVal="0"
                  :decimals="0"
                  color="#00e80a"
                  :endVal="datas.currentWavelength" />
                nm</view
              >
            </view>
            <view v-else class="text">离线</view>
          </view>
        </view>
        <view class="identification">
          <span @click="actions(2)">
            <image v-if="datas.lineType == 2" src="@/static/aa.png"></image>
            <image v-else src="@/static/ba.png"></image>
          </span>
          <span @click="actions(3)">
            <image v-if="datas.lineType == 2" src="@/static/ab.png"></image>
            <image v-else src="@/static/bb.png"></image>
          </span>
          <span @click="actions(4)">
            <image v-if="datas.lineType == 2" src="@/static/ac.png"></image>
            <image v-else src="@/static/bc.png"></image>
          </span>
          <span @click="actions(5)">
            <image v-if="datas.lineType == 2" src="@/static/ad.png"></image>
            <image v-else src="@/static/bd.png"></image>
          </span>
        </view>
      </div>
      <view class="bottom">
        <u-button
          type="primary"
          size="large"
          @click="actions(1)"
          :loading="loading"
          loadingText="数据加载中...">
          <u-icon name="reload" size="42" color="white"></u-icon>
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import BatteryBox from "../../../components/BatteryBox.vue";
import RedLiht from "./components/RedLiht.vue";
import countTo from "@/uni_modules/uv-count-to/components/uv-count-to/uv-count-to.vue";
import { appDeviceAt } from "@/api/device.js";
export default {
  components: {
    BatteryBox,
    countTo,
    RedLiht,
  },
  data() {
    return {
      loading: false,
      imei: "", // 唯一标志
      datas: {
        currentBat: 0, // 电量格数
        lastUpdateTime: "",
        currentPowerDbm: 0, // 信号强度 当前功率mB
        currentPowermW: 0, // 功率 当前功率mW
        currentRedLiht: 0, // 红光状态 0关 1开 2闪烁
        currentWavelength: 0, // 当前波长
        currentsw: 0, // 红光开关 0关 1开
        lineType: 1, // 在线状态 2在线 1离线
      },
    };
  },
  onLoad(val) {
    this.imei = val.imei;
  },
  mounted() {
    setTimeout(() => {
      this.actions(1);
    }, 300);
  },
  methods: {
    // 指令类型 1刷新 2入 3UNIT 4REF 5VFL 6关机
    async actions(atType) {
      if (this.datas.lineType == 1 && atType != 1) {
        return;
      }
      if (this.imei) {
        try {
          this.loading = true;
          uni.showLoading({
            title: "数据加载中...",
            mask: true,
          });
          try {
            let res = await appDeviceAt({
              atType: atType,
              imei: this.imei,
            });
            console.log(res, "res");
            setTimeout(() => {
              let Dbm = 0;
              try {
                if (
                  res?.currentPowerDbm &&
                  res?.currentPowerDbm.indexOf("dBm") != -1
                ) {
                  Dbm = res?.currentPowerDbm.split("dBm")[0];
                } else {
                  Dbm = res?.currentPowerDbm;
                }
              } catch (error) {
                Dbm = res?.currentPowerDbm;
              }
              let Wavelength = 0;
              try {
                if (
                  res?.currentWavelength &&
                  res?.currentWavelength.indexOf("nm") != -1
                ) {
                  Wavelength = res?.currentWavelength.split("nm")[0];
                } else {
                  Wavelength = res?.currentWavelength;
                }
              } catch (error) {
                Wavelength = res?.currentWavelength;
              }
              this.datas = {
                currentBat: res?.currentBat || 0, // 电量格数
                lastUpdateTime: res?.lastUpdateTime || "",
                currentPowerDbm: Dbm || 0, // 信号强度 当前功率mB
                currentPowermW: res?.currentPowermW || 0, // 功率 当前功率mW
                currentRedLiht: res?.currentRedLiht || 0, // 红光状态 0关 1开 2闪烁
                currentWavelength: Wavelength || 0, // 当前波长
                currentsw: res?.currentsw || 0, // 红光开关 0关 1开
                lineType: res?.lineType || 1, // 在线状态 2在线 1离线
              };
              uni.hideLoading();
              this.loading = false;
            }, 1000);
          } catch (error) {
            setTimeout(() => {
              uni.hideLoading();
              this.loading = false;
            }, 1000);
          }
        } catch (error) {
          this.datas.lineType = 1;
          setTimeout(() => {
            uni.hideLoading();
            this.loading = false;
          }, 1000);
        }
      }
    },
  },
};
</script>

<style lang="scss">
.contentBox {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: calc(100vh - 400rpx);
}
.lastUpdateTimeBox {
  width: 240rpx;
  height: 64rpx;
  margin-top: 23rpx !important;
}
.operation {
  height: 100%;
}

.container {
  height: calc(100vh);
  background: #000;
  margin: auto;
}

.head {
  display: flex;
  padding-top: 40rpx;
}

.flex-item {
  flex: 1;
  text-align: center;
}

.flex-item image {
  display: inline-block;
  width: 80rpx;
  height: 80rpx;
}

.flex-text {
  font-size: 24rpx;
  line-height: 30rpx;
  color: #fff;
  margin-top: 20rpx;
  margin-right: 60rpx;
}

.content {
  margin-top: 60rpx;
  padding: 20rpx 0;
  text-align: center;
  position: relative;
}

.content image {
  display: inline-block;
  width: 540rpx;
  height: 540rpx;
}

.num {
  position: absolute;
  top: 32%;
  width: 100%;
  text-align: center;
}

.num .num-a {
  color: #ffd700;
  font-size: 80rpx;
  height: 120rpx;
}

.num .num-b {
  color: #fff;
  font-size: 40rpx;
  margin-top: 20rpx;
  height: 58rpx;
}

.num .num-c {
  color: #00ff0b;
  font-size: 46rpx;
  margin-top: 45rpx;
  height: 70rpx;
}

.identification {
  display: flex;
  background: #fff;
  border-radius: 30rpx;
  padding: 35rpx;
  margin: 0rpx 36rpx 0;
}

.identification span {
  flex: 1;
  display: inline-block;
  margin-right: 30rpx;
}

.identification image {
  display: inline-block;
  width: 120rpx;
  height: 120rpx;
}

.identification span:last-child {
  margin-right: 0;
}

.bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  .u-button {
    height: 160rpx !important;
  }
}

.text {
  font-size: 80rpx;
  color: #ffd700;
  position: absolute;
  top: 38%;
  width: 100%;
  text-align: center;
}
</style>
